<template>
  <div class="code-layout">
    <!-- <div class="code-materials">
      <plug-state :statusStr="status" />
      <br />
      <div>
        <dl class="code-dl" v-for="(e, i) in detailData.tcp_port_list" :key="i">
          <li v-if="e.endpoint">
            <span class="key">端口{{ e.containerPort }}:</span>
            <span class="val"> {{ e.endpoint }}</span>
          </li>
        </dl>
      </div>
      <div class="file">
        <file-list :biz_id="detailData.id" type="workspace" />
      </div>
      <md-preview :biz_id="detailData.id" type="workspace" class="preview" />
    </div> -->

    <div class="code-info">
      <div class="code-info-item">
        <h3 class="info-title">基本信息<i class="el-icon-edit-outline edit" @click="updateBase" /></h3>
        <ul class="info-item">
          <li>
            <span class="key">名称:</span>
            <span class="val">{{ detailData.name }}</span>
          </li>
          <li>
            <span class="key"> 创建人： </span>
            <span class="val">{{
              detailData.create_user && (detailData.create_user.nick_name ||
                detailData.create_user.username) || "admin"
            }}</span>
          </li>
          <li>
            <span class="key">创建时间： </span>
            <span class="val">{{ detailData.create_time }}</span>
          </li>
        </ul>
      </div>

      <div class="code-info-item">
        <h3 class="info-title">描述信息</h3>
        <el-input type="textarea" placeholder="暂无描述信息" :autosize="{ minRows: 4, maxRows: 4 }" disabled
          v-model="detailData.describe" style="cursor: pointer" />
      </div>

      <!-- <div class="code-info-item">
        <h3 class="info-title">模型信息<i class="el-icon-edit-outline edit" @click="updateModel" /></h3>
        <ul class="info-item">
          <li>
            <span class="key">名称:</span>
            <span class="val">{{ detailData.model.servers_name }}</span>
          </li>
          <li>
            <span class="key">版本:</span>
            <span class="val">{{ detailData.model_version.version }}</span>
          </li>
        </ul>
      </div> -->

      <!-- <div class="code-info-item">
        <h3 class="info-title">部署环境<i class="el-icon-edit-outline edit" @click="updateDeploy" /></h3>
        <ul class="info-item">
          <li>
            <span class="key">镜像:</span>
            <span class="val">{{ detailData.image.name }}</span>
          </li>
          <li>
            <span class="key">命令行:</span>
            <span class="val">{{ detailData.main_entry }}</span>
          </li>
        </ul>
      </div> -->

      <div class="code-info-item">
        <h3 class="info-title">节点信息</h3>
        <div class="sub-table">
          <div v-for="item in detailData.ls_edge_pod" :key="item.id" class="sub-table-item">
            <span>ID: {{ item.id }}</span>
            <span>pod名称: {{ item.pod_name }}</span>
            <span>状态: {{ item.status }}</span>
            <span>部署节点ip: {{ item.ip }}</span>
            <span>端口号: {{ item.port }}</span>
          </div>
        </div>
      </div>

      <!-- <div class="code-info-item">
        <h3 class="info-title">端口<i class="el-icon-edit-outline edit" @click="updatePort" /></h3>
        <ul class="info-item">
          <dl class="code-dl" v-for="(e, i) in detailData.port_list" :key="i">
            <li>
              <span class="key">协议:</span>
              <span class="val">{{ e.protocol }}</span>
            </li>
            <li>
              <span class="key">端口:</span>
              <span class="val">{{ e.port }}</span>
            </li>
          </dl>
        </ul>
      </div> -->
    </div>

    <!-- <el-dialog :visible.sync="showUpdateBaseDialog" title="模型部署基本信息" width="840px">
      <el-form class="form myself-form" ref="form" :rules="submitRules" :model="addForm" label-width="120px">
        <el-form-item label="名称" prop="name">
          <el-input type="text" v-model="addForm.name" />
        </el-form-item>
        <el-form-item label="描述" prop="describe">
          <el-input type="textarea" :rows="3" v-model="addForm.describe" />
        </el-form-item>
        <el-form-item label=" ">
          <el-button class="none-type" type="primary" @click="commitBase">确定</el-button>
          <el-button class="none-type" @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog> -->

    <!-- <el-dialog :visible.sync="showModelDialog" title="模型基本信息" width="840px">
      <el-form class="form myself-form" ref="modelForm" :rules="submitModelRules" :model="formData" label-width="120px">
        <el-form-item label="模型">
          <el-radio-group v-model="visibility" @change="getModelList">
            <el-radio :label="0">私有的</el-radio>
            <el-radio :label="1">共享的</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item prop="model_id">
          <el-select v-model="formData.model_id" @change="changeModel" style="width:100%;" :popper-append-to-body="false"
            popper-class="select-popper" placeholder="请选择">
            <el-option v-for="item in modelOptions" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="版本" prop="model_version_id">
          <el-select v-model="formData.model_version_id" @change="changeModelVersion" style="width:100%;"
            :popper-append-to-body="false" popper-class="select-popper" placeholder="请选择">
            <el-option v-for="item in modelVersionOptions" :key="item.id" :label="item.version" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label=" ">
          <el-button class="none-type" type="primary" @click="commitModel">确定</el-button>
          <el-button class="none-type" @click="cancelModel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog> -->

    <!-- <el-dialog :visible.sync="showDeployDialog" title="环境基本信息" width="840px">
      <el-form class="form myself-form" ref="deployForm" :rules="submitDeployRules" :model="formData">
        <el-form-item label="推理环境" prop="">
          <el-radio-group v-model="engineVisibility" @change="changeVisibility()" size="small">
            <el-radio :label='2'>公开的</el-radio>
            <el-radio :label='1'>共享的</el-radio>
            <el-radio :label='0'>我的</el-radio>
          </el-radio-group>
          <div class="select">
            <el-select v-model="formData.image_id" class="full-extent-select">
              <el-option v-for="item in imageOptions" :value="item.id" :label="item.name" :key="item.id">
              </el-option>
            </el-select>
          </div>
        </el-form-item>
        <el-form-item label="命令行" prop="main_entry">
          <el-input type="text" v-model="formData.main_entry" />
        </el-form-item>

        <el-form-item label="资源组" prop="product_id">
          <el-select v-model="formData.product_id" class="full-extent-select">
            <el-option v-for="item in productOptions" :value="item.id" :label="item.name" :key="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="数量" prop="copy">
          <el-input-number v-model="formData.copy"></el-input-number>
        </el-form-item>
        <el-form-item label=" ">
          <el-button class="none-type" type="primary" @click="commitDeploy">确定</el-button>
          <el-button class="none-type" @click="cancelDeploy">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog> -->

    <!-- <el-dialog :visible.sync="showPortDialog" title="端口基本信息" width="840px">
      <el-form class="form myself-form" ref="portForm" :model="formData">
        <el-form-item label="端口">
          <plug-port :port_list="formData.port_list" @infoPort="infoPort" v-if="formData.port_list" />
        </el-form-item>
        <el-form-item label=" ">
          <el-button class="none-type" type="primary" @click="commitPort">确定</el-button>
          <el-button class="none-type" @click="cancelPort">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog> -->

    <DialogBox title="模型部署基本信息" :visible="showUpdateBaseDialog" :confirm="commitBase" :close="cancel">
      <el-form class="form myself-form" ref="form" :rules="submitRules" :model="addForm" label-width="120px">
        <el-form-item label="名称" prop="name">
          <el-input type="text" v-model="addForm.name" />
        </el-form-item>
        <el-form-item label="描述" prop="describe">
          <el-input type="textarea" :rows="3" v-model="addForm.describe" />
        </el-form-item>
      </el-form>
    </DialogBox>
    <DialogBox title="模型基本信息" :visible="showModelDialog" :confirm="commitModel" :close="cancelModel">
      <el-form class="form myself-form" ref="modelForm" :rules="submitModelRules" :model="formData" label-width="120px">
        <el-form-item label="模型">
          <el-radio-group v-model="visibility" @change="getModelList">
            <el-radio :label="0">私有的</el-radio>
            <el-radio :label="1">共享的</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item prop="model_id">
          <el-select v-model="formData.model_id" @change="changeModel" style="width:100%;" :popper-append-to-body="false"
            popper-class="select-popper" placeholder="请选择">
            <el-option v-for="item in modelOptions" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="版本" prop="model_version_id">
          <el-select v-model="formData.model_version_id" @change="changeModelVersion" style="width:100%;"
            :popper-append-to-body="false" popper-class="select-popper" placeholder="请选择">
            <el-option v-for="item in modelVersionOptions" :key="item.id" :label="item.version" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </DialogBox>

    <DialogBox title="环境基本信息" :visible="showDeployDialog" :confirm="commitDeploy" :close="cancelDeploy">
      <el-form class="form myself-form" ref="deployForm" :rules="submitDeployRules" :model="formData">
        <el-form-item label="推理环境" prop="">
          <el-radio-group v-model="engineVisibility" @change="changeVisibility()" size="small">
            <el-radio :label='2'>公开的</el-radio>
            <el-radio :label='1'>共享的</el-radio>
            <el-radio :label='0'>我的</el-radio>
          </el-radio-group>
          <div class="select">
            <el-select v-model="formData.image_id" class="full-extent-select">
              <el-option v-for="item in imageOptions" :value="item.id" :label="item.name" :key="item.id">
              </el-option>
            </el-select>
          </div>
        </el-form-item>
        <el-form-item label="命令行" prop="main_entry">
          <el-input type="text" v-model="formData.main_entry" />
        </el-form-item>

        <el-form-item label="资源组" prop="product_id">
          <el-select v-model="formData.product_id" class="full-extent-select">
            <el-option v-for="item in productOptions" :value="item.id" :label="item.name" :key="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="数量" prop="copy">
          <el-input-number v-model="formData.copy"></el-input-number>
        </el-form-item>
      </el-form>
    </DialogBox>

    <DialogBox title="端口基本信息" :visible="showPortDialog" :confirm="commitPort" :close="cancelPort">
      <el-form class="form myself-form" ref="portForm" :model="formData">
        <el-form-item label="端口">
          <plug-port :port_list="formData.port_list" @infoPort="infoPort" v-if="formData.port_list" />
        </el-form-item>
      </el-form>
    </DialogBox>
  </div>
</template>

<script>
// import { getDeployDetail } from '@/api/deploy'
// import plugState from '@/components/module/plug-state'
import DialogBox from '@/components/module/dialog-box.vue';
import { getAllProducts } from '@/api/product'
import { getDeployDetail, putDeploy } from '@/api/edgeDeploy'
import { getAllModels, getModelDetail } from '@/api/model'
import { getAllModelVersions } from '@/api/modelversion'
import { getAllImages } from '@/api/image'
// import plugPort from '@/components/module/plug-in-port'
export default {
  data() {
    return {
      status: null,
      showModelDialog: false,
      showDeployDialog: false,
      showPortDialog: false,
      visibility: 0,
      engineVisibility: 2,
      formData: {},
      imageOptions: [],
      productOptions: [],
      modelVersionOptions: [],
      modelOptions: [],
      submitModelRules: {
        model_id: [
          { required: true, message: "该项为必填项" },
        ],
        model_version_id: [
          { required: true, message: "该项为必填项" },
        ],
      },
      submitDeployRules: {
        main_entry: [
          { required: true, message: "该项为必填项" },
        ],
        product_id: [
          { required: true, message: "该项为必填项" },
        ],
        copy: [
          { required: true, message: "该项为必填项" },
        ],
      },
      addForm: {},
      showUpdateBaseDialog: false,
      submitRules: {
        name: [
          { required: true, message: "该项为必填项" },
          { required: true, min: 1, max: 40, message: "长度在1到40个字符" },
        ],
        describe: [
          { required: true, message: "该项为必填项" },
          { required: true, min: 1, max: 200, message: "长度在1到200个字符" },
        ],
      },
    };
  },
  components: {
    // plugState,
    // plugPort,
    DialogBox,
  },

  props: ['detailData'],
  watch: {
    detailData(val) {
      this.status = val.status;
      this.formData = JSON.parse(JSON.stringify(val))
    }
  },
  async created() {
    this.formData = JSON.parse(JSON.stringify(this.detailData))
    // this.status = this.detailData.status;
    // this.getProductList()
    // this.getModelList()
    // this.changeVisibility()
    // this.changeModel()
    // this.fresh()
  },
  methods: {
    updateBase() {
      this.addForm = { ...this.detailData }
      console.log(this.addForm, "addForm");
      this.showUpdateBaseDialog = true
    },
    commitBase() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          let res = await putDeploy(this.addForm);
          if (res && res.data) {
            this.showUpdateBaseDialog = false
            this.$emit("getDetail")
            this.fresh()
          }
        }
      })
    },
    cancel() {
      this.showUpdateBaseDialog = false
    },
    editState(state) {
      console.log(state)
    },
    updateModel() {
      this.showModelDialog = true
    },
    commitModel() {
      console.log("formData2222", this.formData)
      this.$refs.modelForm.validate(async (valid) => {
        if (valid) {
          let res = await putDeploy(this.formData);
          if (res && res.data) {
            this.showModelDialog = false
            this.fresh()
          }
        }
      })
    },
    cancelModel() {
      this.showModelDialog = false
    },
    updateDeploy() {
      this.showDeployDialog = true
    },
    commitDeploy() {
      this.$refs.deployForm.validate(async (valid) => {
        if (valid) {
          let res = await putDeploy(this.formData);
          if (res && res.data) {
            this.showDeployDialog = false
            this.fresh()
          }
        }
      })
    },
    cancelDeploy() {
      this.showDeployDialog = false
    },
    updatePort() {
      this.showPortDialog = true
    },
    async commitPort() {
      let res = await putDeploy(this.formData);
      if (res && res.data) {
        this.showPortDialog = false
        this.fresh()
      }
    },
    cancelPort() {
      this.showPortDialog = false
    },
    infoPort(ports) {
      this.formData.port_list = ports
      console.log(this.formData.port_list)
    },
    async getModelList() {
      let res = await getAllModels({ visibility: this.visibility })
      this.modelOptions = res.data
    },
    async getModelVersionList() {
      let res = await getAllModelVersions({ model_id: this.formData.model_id })
      this.modelVersionOptions = res.data
      this.formData.model_version_id = this.modelVersionOptions[0].id
      this.$forceUpdate()
    },

    async getProductList() {
      let res = await getAllProducts()
      this.productOptions = res.data
    },

    async changeVisibility() {
      let res2 = await getAllImages({ visibility: this.engineVisibility, type: 2 })
      this.imageOptions = res2.data
    },
    async changeModel() {
      await getModelDetail({ id: this.formData.model_id })
      this.getModelVersionList()

    },
    async changeModelVersion() {
      console.log("changeModelVersion")
    },
    async fresh() {
      let res = await getDeployDetail({ id: this.formData.id });
      if (res && res.data) {
        this.detailData = res.data;
      }
    }
  }
}
</script>
<style lang="less" scoped>
@import "~@/assets/css/code.less";

.sub-table {
  .sub-table-item {
    border-bottom: 1px solid #eee;
    padding: 10px 0;
    display: flex;
    justify-content: space-around;

    span {
      width: 100%;
    }
  }
}
</style>